/**
 * Vue计算属性
 * 1. 定义:要用的属性不存在,通过已有属性计算而来.
 * 2. 原理: 底层借助了Object.defineproperty方法提供的getter和setter
 * 3. get函数什么时候执行
 * 	-  初次读取时会执行一次
 * 	-  当依赖的数据发生改变时会再次读取
 * 4. 优势: 与methods实现相比,内部有缓存机制,效率更高,调试方便
 * 5. 备注:
 *  -  计算属性最终会出现在VM上,直接读取使用即可
 *  - 如果计算属性要被修改,那必须写set函数去相应修改,且set中要引起计算时依赖的数据发生改变
 */
// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	data: {// data用于存储数据,数据供el指定的容器使用,
		firstname: '张',
		lastname: '三'
	},
	methods: {
		// methods里面方法也可以实现,但是效率有差距,没有缓存可言
		// fullName() {
		// 	return this.firstname.slice(0,3) + '-' + this.lastname;
		// }
	},
	computed: {
		/*全写
		fullName: {
			get() {
				return this.firstname.slice(0, 3) + this.lastname;
			}
		},
		 */
		// 简写
		fullName() {
			return this.firstname.slice(0, 3) + this.lastname;
		}
	}
});
